import mprc from '../../utils/mprc.js';

const {
	Stage,
	Group
} = mprc;

let group;
let stage;

let canvasCtx;
let ruler;

let startDeg = 0;
let paths;



class Paths {
	constructor(option) {
		this.option = option || {};

		this.ctx = canvasCtx.getContext('2d');
		this.ctx.globalCompositeOperation = "source-over";
		this.points = [];
	}

	beginPath() {
		this.ctx.beginPath()
	}

	moveTo(x, y) {
		this.ctx.moveTo(x, y)
	}

	lineTo(x, y, lineWidth, strokeStyle) {
		this.ctx.lineTo(x, y)
		this.ctx.lineWidth = lineWidth || 2;
		this.ctx.strokeStyle = strokeStyle || 'blue';
	}

	stroke() {
		this.ctx.stroke();
	}

	clear(x, y, width, height) {
		this.ctx.fillStyle = "#ffffff";
		this.ctx.fillRect(x, y, width, height);
		// group.destroy();
	}

	setStartPoints(x, y) {
		this.startX = x;
		this.startY = y;
	}

	setEndPoints(x, y) {
		this.endX = x;
		this.endY = y;
	}

	setPoints(x, y) {
		this.points.push({
			x,
			y
		});
	}

	getPoints() {
		return this.points;
	}

	clearPoints() {
		this.points.length = 0;
	}

}

Page({
	data: {
		systemInfo: wx.getSystemInfoSync(),
		width: 0,
		height: 0,
		mode: 'dis',
		onRuler: false
	},
	onLoad(options) {
		this.setData({
			width: this.data.systemInfo.windowWidth,
			height: this.data.systemInfo.windowHeight - 100,
		});

	},

	onReady() {
		this.canvas();
	},
	canvas: async function () {
		canvasCtx = await this.getContainer('#canvas');
		stage = new Stage(canvasCtx, this.data.width, this.data.height);
		const hitCanvas = await this.getContainer('#hitCanvas');
		stage.setHitCanvas(hitCanvas);
	},

	// 事件监听
	touchstart(event) {
		// stage.touchStartHandler(event);
		let touch = event.touches;

		if (this.data.mode == 'dis') {
			return;
		}

		paths = new Paths({})
		paths.beginPath();
		paths.moveTo(touch[0].x, touch[0].y)
		paths.setPoints(touch[0].x, touch[0].y)
		paths.setStartPoints(touch[0].x, touch[0].y)
		paths.setEndPoints(touch[0].x, touch[0].y)
	},

	touchmove(event) {
		// stage.touchMoveHandler(event);
		let touch = event.touches;

		if (this.data.mode == 'dis') {
			return;
		}

		if (this.data.mode == 'paths') {
			paths.lineTo(touch[0].x, touch[0].y)
			paths.stroke()
			paths.setEndPoints(touch[0].x, touch[0].y)
			paths.setPoints(touch[0].x, touch[0].y)
		} else if (this.data.mode == 'line') {
			paths.lineTo(touch[0].x, paths.startY)
			paths.stroke()
			paths.setEndPoints(touch[0].x, paths.startY)
			paths.setPoints(touch[0].x, paths.startY)
		} else if (this.data.mode == 'vline') {
			paths.lineTo(paths.startX, touch[0].y)
			paths.setEndPoints(paths.startX, touch[0].y)
			paths.setPoints(paths.startX, touch[0].y)
			paths.stroke()
		} else if (this.data.mode == 'pathsToLine') {
			paths.lineTo(touch[0].x, touch[0].y)
			paths.stroke()
			paths.setEndPoints(touch[0].x, touch[0].y)
			paths.setPoints(touch[0].x, touch[0].y)
		} else {
			// 斜线

			//起点和当前点的距离
			let dis = this.getDis({
				x: paths.startX,
				y: paths.startY
			}, {
				x: touch[0].x,
				y: paths.startY
			});

			paths.lineTo(touch[0].x, paths.startY + dis * Math.tan(60 * Math.PI / 180))
			paths.stroke()
			paths.setEndPoints(touch[0].x, paths.startY + dis * Math.tan(60 * Math.PI / 180))
			paths.setPoints(touch[0].x, paths.startY + dis * Math.tan(60 * Math.PI / 180))
		}
	},

	touchend(event) {
		if (this.data.mode == 'pathsToLine') {

			paths.ctx.globalCompositeOperation = "destination-out";
			paths.beginPath();
			paths.moveTo(paths.startX, paths.startY)
			for (let i = 0; i < paths.points.length; i++) {
				paths.lineTo(paths.points[i].x, paths.points[i].y, 2.2, 'red')
				paths.stroke()
			}

			paths.ctx.globalCompositeOperation = "source-over";
			paths.beginPath();
			paths.moveTo(paths.startX, paths.startY)
			paths.lineTo(paths.endX, paths.endY, 2, '#41c3a8')
			paths.stroke()
		}

		paths.clearPoints();
	},
	longTap(event) {
		// console.log(event)
	},
	getDis(point, point2) {
		let x = point2.x - point.x;
		let y = point2.y - point.y;
		return Math.sqrt(x * x + y * y);
	},
	getDeg(point, point2) {
		let x = point2.x - point.x;
		let y = point2.y - point.y;
		return Math.atan2(y, x) * 180 / Math.PI;
	},

	// 获取canvas对象方法
	getContainer(id) {
		return new Promise((resolve, reject) => {
			const query = wx.createSelectorQuery();
			query
				.select(id)
				.fields({
					node: true,
					size: true
				})
				.exec(res => {
					const canvas = res[0].node;
					resolve(canvas);
				});
		});
	},
	draw() {
		// 集合容器，设置透明度
		group = new Group();
		group.x = 0;
		group.y = 0;
		group.alpha = 1;

		// 将集合放入根容器
		stage.add(group);
		// 更新渲染
		stage.update();
	},
	clear() {
		paths.clear(0, 0, this.data.width, this.data.height)
	},
	setMode(e) {
		this.data.mode = e.currentTarget.dataset.mode
	}
});